<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view class="BoxList">
		<view class="actricBox" v-for="(item,index) in list.rows" :key="index" @click="handelTitle(item)">
			<view v-if="type==='integral'" class="title">{{typeTxt[item.type-1]}}</view>
			<view v-else class="title">{{item.title}}</view>
			<template v-if="type==='list'">
				<view class="text">{{item.synopsis}}</view>
				<view class="selefMessage">
					<view class="left">
						<view class="avatarImg">
							<u-avatar :src="item.anonymous===2?item.avatarUrl:''" shape="circle" size="50rpx"></u-avatar>
						</view>
						<text class="actricName">{{decodeURI(item.author)}}</text>
						<text class="actricTime">{{getTime(item.createTime)}}</text>
					</view>
					<view class="right">
						<u-text :text="getString(item.seeNum,'浏览数:')" type="info" align="right" size="12"></u-text>
						<u-text :text="getString(item.iconNum,'点赞:')" type="info" align="right" size="12"></u-text>
					</view>
				</view>
			</template>
			<template v-if="type==='self'">
				<view class="selefMessage self">
					<view class="left">
						<text class="actricTime">{{getTime(item.createTime)}}</text>
						<text class="actricTime">浏览数:{{item.seeNum?item.seeNum:0}}</text>
						<text class="actricTime">点赞:{{item.iconNum?item.iconNum:0}}</text>
					</view>
					<view class="right">
						<u-text v-if="item.upOrDown===1" text="已上架" type="primary" align="right" size="12"></u-text>
						<u-text v-if="item.upOrDown===2" text="未上架" type="info" align="right" size="12"></u-text>
						<!-- <u-text v-if="item.type==='3'" text="审核违规" type="error" align="right" size="12"></u-text> -->
					</view>
				</view>
			</template>
			<template v-if="type==='integral'">
				<view class="selefMessage self">
					<view class="left">
						<text class="actricTime">{{getTime(item.createTime)}}</text>
					</view>
					<view class="right">
						<view class="integral">
							<u-text :text="'+'+item.integral+'积分'" align="right" size="16" color='#F1831C'></u-text>
						</view>
						<u-text :text="item.cumulative?item.cumulative:item.integral" type="info" align="right"
							size="12"></u-text>
					</view>
				</view>
			</template>
		</view>
		<u-loadmore :line="true" :status="list.rows.length<list.total?'loadmore':'nomore'" @loadmore="handelMore()" nomoreText="我是有底线的"/>
	</view>

</template>

<script>
	export default {
		props: {
			list: Object,
			type: String
		},
		data() {
			return {
				status: "nomore",
				typeTxt: ["每日签到", "分享文章", "绑定手机", "邀请好友"],
			}
		},
		
		methods: {
			handelTitle(item) {
				if (this.type !== 'integral') {
					const $userInfo = this.$store.state.$userInfo
					if ($userInfo.openId) {
						this.$u.route({
							url: 'pages/componet/main/look/index?id=' + item.id
						})
					}
				}

			},
			getTime(val) {
				const datetime = new Date(val)
				return uni.$u.timeFrom(datetime.getTime())
			},
			getString(val, val1) {
				const t = val ? val : 0
				return val1 + "" + t
			},
			handelMore() {
				this.$emit("loadMore", "更多")
			}

		},
	}
</script>

<style lang="scss" scoped>
	.BoxList {
		padding-bottom: 150rpx;
	}

	.actricBox {
		background: #fff;
		margin-top: 8px;
		padding: 12px;

		.title {
			font-family: HarmonyHeiTi-Medium;
			font-size: 30rpx;
			color: #000000;
			font-weight: bold;
			line-height: 30px;
		}

		.text {
			font-family: HarmonyHeiTi;
			font-size: 28rpx;
			color: #9E9E9E;
			font-weight: 400;
			line-height: 20px;
			word-break: break-all
		}

		.selefMessage {
			width: 100%;
			flex-direction: row;
			flex-wrap: wrap;
			display: flex;
			position: relative;
			line-height: 40px;

			&.self {
				line-height: 25px;

				.left {
					width: 70%;

					.actricTime {
						padding-right: 10px;
						padding-left: 0;
					}
				}

				.right {
					width: 30%;
				}
			}

			.left,
			.right {
				flex-direction: row;
				flex-wrap: wrap;
				display: flex;
				position: relative;
			}

			.left {
				width: 50%;

				.avatarImg {
					position: relative;
					top: 9px;
					width: 50rpx;
					height: 50rpx;

					image {
						width: 50rpx !important;
						height: 50rpx !important;
					}
				}

				.actricName {
					padding-left: 8px;
					font-family: HarmonyHeiTi;
					font-size: 30rpx;
					color: #000000;
					font-weight: 400;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					max-width: 220rpx;

				}

				.actricTime {
					font-family: HarmonyHeiTi;
					font-size: 28rpx;
					color: #9E9E9E;
					font-weight: 400;
					padding-left: 10px;
				}
			}

			.right {
				width: 50%;
				text-align: right;

				text {
					font-family: HarmonyHeiTi;
					font-size: 28rpx;
					color: #9E9E9E;
					font-weight: 400;
					margin-left: 5px;

				}

				position: relative;

				.integral {
					position: absolute;
					top: -30px;
					right: 0px;
				}
			}

		}

	}
</style>
